<script setup>
import { ref, reactive } from 'vue'

const formData = reactive({
  username: '',
  password: '',
  confirmPassword: '',
  accountType: 'personal', // 默认为个人账号
  phoneNumber: '',
  email: '',
  fullName: '' // 添加真实姓名字段
})

const accountTypes = [
  { value: 'personal', label: '个人账号' },
  { value: 'family', label: '家庭账号' }
]

const membershipTiers = [
  { value: 'free', label: '基础版', description: '基本功能' },
  { value: 'standard', label: '标准版', description: '包含更多健康指导内容' },
  { value: 'premium', label: '高级版', description: '完整使用所有功能，可绑定3个家庭成员' }
]

const errorMsg = ref('')
const loading = ref(false)
const showMembershipInfo = ref(false)

function handleRegister() {
  // 简单的表单验证
  if (!formData.username || !formData.password || !formData.confirmPassword) {
    errorMsg.value = '用户名和密码不能为空'
    return
  }
  
  if (!formData.fullName) {
    errorMsg.value = '请输入真实姓名'
    return
  }
  
  if (formData.phoneNumber && !/^1\d{10}$/.test(formData.phoneNumber)) {
    errorMsg.value = '请输入正确的手机号码'
    return
  }
  
  if (formData.email && !/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(formData.email)) {
    errorMsg.value = '请输入正确的邮箱地址'
    return
  }
  
  if (formData.password !== formData.confirmPassword) {
    errorMsg.value = '两次输入的密码不一致'
    return
  }
  
  errorMsg.value = ''
  loading.value = true
  
  // 模拟注册请求
  setTimeout(() => {
    // 这里应该是实际的注册API调用
    // 简单模拟注册成功
    // 保存用户信息到本地存储
    const users = uni.getStorageSync('users') || []
    
    // 检查用户名是否已存在
    const userExists = users.some(user => user.username === formData.username)
    if (userExists) {
      errorMsg.value = '用户名已存在'
      loading.value = false
      return
    }
    
    // 添加新用户
    const newUser = {
      username: formData.username,
      password: formData.password,
      fullName: formData.fullName,
      accountType: formData.accountType,
      phoneNumber: formData.phoneNumber,
      email: formData.email,
      registerTime: new Date().getTime(),
      membershipLevel: 'free', // 默认为免费会员
      familyMembers: [] // 家庭成员列表（如果是家庭账号）
    }
    
    // 如果是家庭账号，添加家庭账号特有属性
    if (formData.accountType === 'family') {
      newUser.maxMembers = 3; // 最多可绑定3个成员
      newUser.currentMembers = 0; // 当前绑定成员数
    }
    
    users.push(newUser)
    
    uni.setStorageSync('users', users)
    
    uni.showToast({
      title: '注册成功',
      icon: 'success'
    })
    
    // 跳转到登录页
    setTimeout(() => {
      uni.navigateTo({
        url: '/pages/login/index',
        success: function() {
          console.log('注册成功后导航到登录页成功');
        },
        fail: function(err) {
          console.error('注册成功后导航到登录页失败', err);
        }
      })
    }, 1500)
  }, 1000)
}

function goToLogin() {
  uni.navigateTo({
    url: '/pages/login/index'
  })
}

function toggleMembershipInfo() {
  showMembershipInfo.value = !showMembershipInfo.value
}
</script>

<template>
  <view class="container">
    <view class="header">
      <image class="logo" src="/static/logo.png" mode="aspectFit" />
      <view class="title">知录我&健康-中医健康管家</view>
    </view>
    
    <view class="login-form">
      <view class="form-item">
        <text class="label">用户名</text>
        <input 
          class="input" 
          v-model="formData.username" 
          placeholder="请输入用户名" 
          type="text"
        />
      </view>
      
      <view class="form-item">
        <text class="label">真实姓名</text>
        <input 
          class="input" 
          v-model="formData.fullName" 
          placeholder="请输入真实姓名" 
          type="text"
        />
      </view>
      
      <view class="form-item">
        <text class="label">密码</text>
        <input 
          class="input" 
          v-model="formData.password" 
          placeholder="请输入密码" 
          type="password"
        />
      </view>
      
      <view class="form-item">
        <text class="label">确认密码</text>
        <input 
          class="input" 
          v-model="formData.confirmPassword" 
          placeholder="请再次输入密码" 
          type="password"
        />
      </view>
      
      <view class="form-item">
        <text class="label">账号类型</text>
        <view class="radio-group">
          <view 
            v-for="type in accountTypes" 
            :key="type.value" 
            class="radio-item"
            :class="{ 'radio-active': formData.accountType === type.value }"
            @tap="formData.accountType = type.value"
          >
            <view class="radio-circle">
              <view v-if="formData.accountType === type.value" class="radio-inner"></view>
            </view>
            <text>{{ type.label }}</text>
          </view>
        </view>
      </view>
      
      <view v-if="formData.accountType === 'family'" class="form-note">
        <text>家庭账号可绑定3个家庭成员（需要高级会员）</text>
        <text class="link-text" @tap="toggleMembershipInfo">查看会员权益</text>
      </view>
      
      <view v-if="showMembershipInfo" class="membership-info">
        <view class="membership-title">会员权益介绍</view>
        <view 
          v-for="tier in membershipTiers" 
          :key="tier.value" 
          class="membership-tier"
        >
          <view class="tier-name">{{ tier.label }}</view>
          <view class="tier-desc">{{ tier.description }}</view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">手机号码 (选填)</text>
        <input 
          class="input" 
          v-model="formData.phoneNumber" 
          placeholder="请输入手机号码" 
          type="number"
          maxlength="11"
        />
      </view>
      
      <view class="form-item">
        <text class="label">邮箱 (选填)</text>
        <input 
          class="input" 
          v-model="formData.email" 
          placeholder="请输入邮箱地址" 
          type="text"
        />
      </view>
      
      <view v-if="errorMsg" class="error-msg">{{ errorMsg }}</view>
      
      <button 
        class="login-btn" 
        :disabled="loading" 
        :loading="loading" 
        @tap="handleRegister"
      >
        {{ loading ? '注册中...' : '注册' }}
      </button>
      
      <view class="tips">
        <text @tap="goToLogin" class="login-link">已有账号？点击登录</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30rpx 0;
  
  .logo {
    width: 150rpx;
    height: 150rpx;
    margin-bottom: 20rpx;
  }
  
  .title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
  }
}

.login-form {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 40rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .form-item {
    margin-bottom: 30rpx;
    
    .label {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 15rpx;
      display: block;
    }
    
    .input {
      width: 100%;
      height: 80rpx;
      background-color: #f8f8f8;
      border-radius: 8rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
  }
  
  .form-note {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 20rpx;
    display: flex;
    flex-direction: column;
    
    .link-text {
      color: #1890ff;
      margin-top: 10rpx;
      text-decoration: underline;
    }
  }
  
  .membership-info {
    background-color: #f9f9f9;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-bottom: 30rpx;
    
    .membership-title {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 15rpx;
      color: #333;
    }
    
    .membership-tier {
      margin-bottom: 15rpx;
      padding-bottom: 15rpx;
      border-bottom: 1px solid #eee;
      
      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
      }
      
      .tier-name {
        font-size: 26rpx;
        font-weight: bold;
        color: #1890ff;
      }
      
      .tier-desc {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
  
  .radio-group {
    display: flex;
    
    .radio-item {
      flex: 1;
      display: flex;
      align-items: center;
      padding: 15rpx 20rpx;
      background-color: #f8f8f8;
      border-radius: 8rpx;
      margin-right: 20rpx;
      
      &:last-child {
        margin-right: 0;
      }
      
      &.radio-active {
        background-color: #e6f7ff;
        border: 1px solid #1890ff;
      }
      
      .radio-circle {
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        border: 1px solid #ddd;
        margin-right: 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        
        .radio-inner {
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background-color: #1890ff;
        }
      }
      
      text {
        font-size: 26rpx;
        color: #333;
      }
    }
  }
  
  .error-msg {
    color: #ff4d4f;
    font-size: 24rpx;
    margin-bottom: 20rpx;
  }
  
  .login-btn {
    width: 100%;
    height: 80rpx;
    background-color: #1890ff;
    color: #fff;
    border-radius: 8rpx;
    font-size: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20rpx;
    
    &:active {
      opacity: 0.8;
    }
  }
  
  .tips {
    margin-top: 30rpx;
    font-size: 24rpx;
    color: #999;
    display: flex;
    flex-direction: column;
    align-items: center;
    
    .login-link {
      color: #1890ff;
      text-decoration: underline;
    }
  }
}
</style>